import React, { useState, useRef, useEffect } from 'react'
import { LeftOutline } from 'antd-mobile-icons'
import { List, Popup } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router-dom'
export default function Xq() {
  const [visible1, setVisible1] = useState(false)
  const inputRef = useRef(null);
  const [photo, setPhoto] = useState('http://127.0.0.1:3000/logo192.png');

  const takePhoto = () => {
    const input = inputRef.current;
    if (input.files && input.files[0]) {
      const reader = new FileReader();
      reader.onload = e => setPhoto(e.target.result);
      reader.readAsDataURL(input.files[0]);
    }
  };

  const a = useLocation().state
  const navigate = useNavigate()
  useEffect(() => {
    if(a){
      setPhoto(a)
    }
  }, [])
  return (
    <div className='box4'>
      <input type="file" accept="image/*" capture="camera" ref={inputRef} onChange={takePhoto} hidden />
      <p>
        <LeftOutline style={{ fontSize: "24px" }} />
      </p>
      <p style={{ fontSize: '18px', color: '#de7d2c', fontWeight: 'bold', margin: '20px 0' }}>个人信息</p>
      <p style={{ textAlign: 'center', marginBottom: '40px' }}>
        <img style={{ backgroundColor: '#de7d2c', width: '130px', height: '130px', borderRadius: '50%', padding: '10px' }} src={photo}></img>
      </p>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '20px 0', fontSize: '18px', borderBottom: '1px solid gray', padding: '20px 0' }}>
        <p>昵称</p>
        <input placeholder='天河朱丽叶' style={{ border: '0', fontSize: '18px', textAlign: 'right', color: 'gray' }}></input>
      </div>
      <p style={{ fontSize: '18px' }}>个性签名</p>
      <p style={{ fontSize: '18px', borderBottom: '1px solid gray', padding: '20px 0' }}>
        <input placeholder='认识你们，很开心~' style={{ border: '0', fontSize: '18px', color: 'gray' }}></input>
      </p>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: '18px', borderBottom: '1px solid gray', padding: '20px 0' }}>
        <p>手机号</p>
        <input style={{ border: '0', fontSize: '18px', textAlign: 'right', color: 'gray' }} placeholder='17866668888'></input>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: '18px', borderBottom: '1px solid gray', padding: '20px 0' }}>
        <p>邮箱</p>
        <input style={{ border: '0', fontSize: '18px', textAlign: 'right', color: 'gray' }} placeholder='123456@qq.com'></input>
      </div>
      <div style={{ fontSize: '18px', borderBottom: '1px solid gray', padding: '8px 0' }}>
        <List>
          <List.Item onClick={() => { }}>
            学生认证
          </List.Item>
        </List>
      </div>
      <div className='circle'>
        <p onClick={() => {
          setVisible1(true)
        }} style={{ textAlign: 'center', color: 'white', lineHeight: '70px', fontSize: '18px' }}>点击更换</p>
      </div>
      <p style={{ textAlign: 'center', margin: '40px 0' }}>
        <button style={{ padding: '20px 60px', fontSize: '18px', color: 'white', border: '0', backgroundColor: '#de7d2c', borderRadius: '15px', boxShadow: '0px 1px 5px slategrey' }}>保存</button>
      </p>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        onClose={() => {
          setVisible1(false)
        }}
        bodyStyle={{ height: '20vh' }}
      >
        <p style={{ textAlign: 'center', fontSize: '20px', borderBottom: '1px solid black', padding: '20px 0', borderTop: '1px solid black' }} onClick={()=>{
          navigate('/px')
        }}>拍照</p>
        <p style={{ textAlign: 'center', fontSize: '20px', borderBottom: '1px solid black', padding: '20px 0' }} onClick={() => {
          inputRef.current.click()
          setVisible1(false)
        }}>从相册获取</p>
      </Popup>
    </div>
  )
}
